<!-- 资产配置 -->
<template>
  <div class="main">
    <PureTableBar class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="CreateAsset()"> 添加 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" ref="pureref" max-height="600" :checkList="checkList"
          :pagination="pagination" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </pure-table>
      </template>
    </PureTableBar>
    <!-- 新建 -->
    <ReDialog :width="700" :height="550" :models="DialogVisible" @Closes="CloseVisible(CreditFrom)">
      <template #header>
        <h2 style="text-align: center;">新建资产配置方案</h2>
      </template>
      <template #main>
        <el-scrollbar height="450px">
          <el-form label-width="150px" label-position="left" :rules="rules" ref="CreditFrom" :model="RefForm">
            <h2 class="from_title">投资组合业务</h2>
            <p class="from_concent">
              由投资人或金融机构所持有的股票、债券、金融衍生品等组成的集合，目的是分散风险。
              投资组合内产品种类及比例根据不同客户的期望收益率范围及风险承受能力，基于产品过往表现进行相应模拟计算后确定。投资组合相较于单一证券产品交易，
              通过不同风险系数产品组合、多元化的产品行业选择以及自动的抛售机制，可以很大程度上的有效分散风险。
            </p>
            <el-form-item label="资产配置方案名称" prop="Name">
              <el-input v-model.trim="RefForm.Name" class="!w-[220px]" />
            </el-form-item>
            <el-form-item label="适合风险等级" prop="class">
              <el-select v-model="RefForm.class" value-key="value" class="!w-[220px]">
                <el-option v-for="it in Ncalss" :key="it.value" :label="it.label" :value="it" />
              </el-select>
              <!-- <el-input v-model="RefForm.class" /> -->
            </el-form-item>
            <el-form-item label="预期波动率(%)" prop="volatility">
              <el-input type="number" v-model.number="RefForm.volatility" class="!w-[220px]" />
            </el-form-item>
            <el-form-item label="预期收益率(%)" prop="yield">
              <el-input type="number" v-model.number="RefForm.yield" class="!w-[220px]" />
            </el-form-item>
            <p class="from_concent">
              开放式基金按投资方向基本分为四种：股票型基金、混合型基金、债券型基金、以及货币型基金。
              股票基金（包括指数基金）就是将基金资产的大部分投资于股市；债券基金（包括保本基金）是将基金资产投资于债券；
              混合型是指基金资产既投资股市又投资于债券；货币市场基金是投资于货币市场产品。
              一般来说，股票基金的风险最高，可能获得的收益也最高。债券基金风险较低，混合型基金的风险介于二者之间，货币市场基金的风险最低，可能获得的收益也最低。
              构建恰当的基金投资组合可以分散风险，提高收益。根据您的风险偏好和风险承受能力，应主要选择低风险的基金品种。
            </p>
            <p class="from_concent">根据您的投资类型及您的选择，您的基金投资组合建议如下</p>
            <el-form-item label="现金管理类（%）" prop="Management">
              <el-input type="number" v-model.number="RefForm.Management" class="!w-[220px]" />
            </el-form-item>
            <el-form-item label="固定收益类（%）" prop="FixedIncome">
              <el-input type="number" v-model.number="RefForm.FixedIncome" class="!w-[220px]" />
            </el-form-item>
            <el-form-item label="权益收益类（%）" prop="IncomeEquity">
              <el-input type="number" v-model.number="RefForm.IncomeEquity" class="!w-[220px]" />
            </el-form-item>
            <el-form-item label="另类及其他（%）" prop="otherness">
              <el-input type="number" v-model.number="RefForm.otherness" class="!w-[220px]" />
            </el-form-item>
            <h2 class="from_title">风险提示</h2>
            <p class="from_concent">
              本开放式基金投资建议书仅供参考，不作为任何法律文件。
              基金管理人依照诚实信用、勤勉尽职的原则管理和运用基金资产，但不保证基金一定赢利，
              也不保证最低收益。投资有风险，过往业绩并不代表将来业绩。投资者在投资基金前，
              应认真阅读《基金合同》及《招募说明书》（相关材料）。
            </p>
          </el-form>
        </el-scrollbar>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="SubmitVisible(CreditFrom)" :loading="BtnLoading" type="primary">确定</el-button>
          <el-button @click="CloseVisible(CreditFrom)"> 取消 </el-button>
        </span>
      </template>
    </ReDialog>
  </div>
  <!-- 资产配置 -->
</template>
<script lang="ts" setup>

import { PureTableBar } from "@/components/RePureTableBar";
import { useAssetAllocation } from "./hook/AssetAllocation";
const {
  rules,
  Ncalss,
  RefForm,
  columns,
  loading,
  pureref,
  dataList,
  BtnLoading,
  pagination,
  CreditFrom,
  DialogVisible,
  CreateAsset,
  handleSizeChange,
  handleCurrentChange,
  SubmitVisible,
  CloseVisible
} = useAssetAllocation()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);

.from_title {
  text-align: left;
  font-size: 20px;
}

.from_concent {
  text-align: left;
  margin: 5px 0;
  font-size: 14px;
}

:deep(.el-form) {
  padding: 0 15px;
}

:deep(.el-dialog__footer) {
  text-align: center;
}
</style>
